<h1><code ng:non-bindable="">$animator</code>
<span class="hint">(service in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/animator.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>The $animator.create service provides the DOM manipulation API which is decorated with animations.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$animator(scope, attr);</pre>
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>scope</td><td><a href="" class="label type-hint type-hint-scope">Scope</a></td><td><p>the scope for the ng-animate.</p></td></tr><tr><td>attr</td><td><a href="" class="label type-hint type-hint-attributes">Attributes</a></td><td><p>the attributes object which contains the ngAnimate key / value pair. (The attributes are
passed into the linking function of the directive using the <code>$animator</code>.)</p></td></tr></tbody></table><h4 id="returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-object">object</a></td><td><p>the animator object which contains the enter, leave, move, show, hide and animate methods.</p></td></tr></table></div>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="animate">animate(element)</h3>
<div class="animate"><p>Triggers a custom animation event to be executed on the given element</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>that will be animated</p></td></tr></tbody></table></div>
</li>
<li><h3 id="enabled">enabled(If)</h3>
<div class="enabled"><p>Globally enables/disables animations.</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>If <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">Boolean</a></td><td><p>provided then set the animation on or off.</p></td></tr></tbody></table><h5 id="returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">Boolean</a></td><td><p>Current animation state.</p></td></tr></table></div>
</li>
<li><h3 id="enter">enter(element, parent, after)</h3>
<div class="enter"><p>Injects the element object into the DOM (inside of the parent element) and then runs the enter animation.</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the element that will be the focus of the enter animation</p></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the parent element of the element that will be the focus of the enter animation</p></td></tr><tr><td>after</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the sibling element (which is the previous element) of the element that will be the focus of the enter animation</p></td></tr></tbody></table></div>
</li>
<li><h3 id="hide">hide(element)</h3>
<div class=""><p>Starts the hide animation first and sets the CSS <code>display</code> property to <code>none</code> upon completion.</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the element that will be rendered visible or hidden</p></td></tr></tbody></table></div>
</li>
<li><h3 id="leave">leave(element, parent)</h3>
<div class="leave"><p>Runs the leave animation operation and, upon completion, removes the element from the DOM.</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the element that will be the focus of the leave animation</p></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the parent element of the element that will be the focus of the leave animation</p></td></tr></tbody></table></div>
</li>
<li><h3 id="move">move(element, parent, after)</h3>
<div class="move"><p>Fires the move DOM operation. Just before the animation starts, the animator will either append it into the parent container or
add the element directly after the after element if present. Then the move animation will be run.</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the element that will be the focus of the move animation</p></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the parent element of the element that will be the focus of the move animation</p></td></tr><tr><td>after</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the sibling element (which is the previous element) of the element that will be the focus of the move animation</p></td></tr></tbody></table></div>
</li>
<li><h3 id="show">show(element)</h3>
<div class="show"><p>Reveals the element by setting the CSS property <code>display</code> to <code>block</code> and then starts the show animation directly after.</p><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><p>the element that will be rendered visible or hidden</p></td></tr></tbody></table></div>
</li>
</ul>
</div>
</div>
